<template>
  <view>
    <z-paging @query="queryList" :refresher-enabled="true" ref="paging" v-model="dataList" class="">
      <template slot="top">
        <view class="color-bg-fff flex-between padding-15" @click="goToRecord">
          <view class="font-light color-333 flex-start">
            <text class="margin-right-2">开票记录</text>
            <u-icon name="arrow-right" color="#333333" size="14"></u-icon>
          </view>
          <view class="color-999 flex-start" >
            <u-icon name="list" color="#999" size="14"></u-icon>
            <text class="margin-left-2">开票记录</text>
          </view>
        </view>
      </template>
      <view>
        <view v-for="item in dataList" :key="item.id" class="color-bg-fff margin-x-10 margin-y-10 padding-15 border-radius-10 shadow">
          <view class="flex-between margin-bottom-10">
            <view class="font-16 color-333 font-weight">{{ item.className }}</view>
            <view>
              <text class="color-999">可开票金额：</text>
              <text class="color-main font-weight font-16">￥{{ item.amount }}</text>
            </view>
          </view>
          <view class="flex-end margin-top-10">
            <view>
              <u-button shape="circle" color="#5BA2F9" :customStyle="{height:'60rpx'}" @click="goInvoice(item)">去开票</u-button>
            </view>
          </view>
        </view>
      </view>
    </z-paging>
    <u-popup :show="showNotice" mode="center" :round="10" width="80%" :safeAreaInsetBottom="false">
      <view class="padding-20">
        <view class="font-16 font-weight color-333 margin-bottom-10">开票须知</view>
        <view class="font-14 color-666">
          1. 请确保填写的发票信息准确无误。<br>
          2. 电子发票将发送至您填写的邮箱。<br>
          3. 如有疑问请联系客服。
        </view>
        <view class="margin-top-20">
          <u-button type="primary" shape="circle" @click="showNotice = false">我知道了</u-button>
        </view>
      </view>
    </u-popup>
  </view>
</template>

<script>
import { getMyClasses } from '@/api/course/class'

export default {
  data() {
    return {
      dataList: [],
      queryParams: {
        pageNo: 1,
        pageSize: 10,
      },
      showNotice: false
    };
  },
  methods: {
    queryList(page) {
      this.queryParams.pageNo = page;
      this.getList();
    },
    async getList() {
      try {
        uni.showLoading({
          title: '加载中...'
        })
        
        const query = {
          pageNum: this.queryParams.pageNo,
          pageSize: this.queryParams.pageSize
        }
        
        const response = await getMyClasses(query)
        
        if (response.code === 200) {
          // 映射数据格式以适配开票页面显示
          const mappedData = (response.rows || []).map(item => ({
            id: item.id,
            className: item.className || '班级名称',
            amount: item.currentPrice || item.amount || 0,
            orderDate: item.enrollDate || item.createTime || '未知日期',
            orderNo: item.orderNo || `ORD${item.id}${Date.now()}`,
            classId: item.id,
            originalPrice: item.originalPrice,
            currentPrice: item.currentPrice,
            studentCount: item.studentCount
          }))
          
          this.$refs.paging.complete(mappedData);
        } else {
          this.$refs.paging.complete([]);
          uni.showToast({
            title: response.msg || '获取班级列表失败',
            icon: 'none'
          })
        }
      } catch (error) {
        console.error('获取我的班级列表失败:', error)
        this.$refs.paging.complete([]);
        uni.showToast({
          title: '网络错误，请重试',
          icon: 'none'
        })
      } finally {
        uni.hideLoading()
      }
    },
    goInvoice(item) {
      uni.navigateTo({
        url: `/pages/work/invoice/apply?classId=${item.classId || item.id}`
      });
    },
    goToRecord() {
      uni.navigateTo({
        url: '/pages/work/invoice/record'
      });
    }
  },
};
</script>

<style lang="scss" scoped></style>